<template>
	<div class="main">
		<navTop></navTop>
		<div class="contentboxset">
			<div class="breadBox" :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item>作业</el-breadcrumb-item>
					<el-breadcrumb-item>学校信息</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<div class="contentMain">
			<div class="contentmaincontent"
				:style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
				<div class="searchlist">
					<router-link to="/studentinfo" active-class="hover">学生信息</router-link>
					<router-link to="/teacherinfo" active-class="hover">教师信息</router-link>
					<router-link to="/grademanagement" active-class="hover">年级管理</router-link>
					<router-link to="/classmanagement" active-class="hover">班级管理</router-link>
					<router-link to="/subjectmanagement" active-class="hover">科目管理</router-link>
					<!-- <router-link to="/subjectselectionmanagement" active-class="hover">选科管理</router-link> -->
					<router-link to="/topicmanagement" active-class="hover">题型管理</router-link>
					<!-- <router-link to="/" active-class="hover">上线管理</router-link> -->
					<!-- <router-link to="/taskset" active-class="hover">任务设置 </router-link> -->
				</div>
				<div class="overviewcontent">
					<div class="studentSearch">
						<el-select v-model="gradeId" placeholder="学部/年级" @change="xbchange" clearable>
							<el-option v-for="item in gradelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
						<el-select v-model="setvalue" placeholder="班级" @change="classchange" clearable>
							<el-option v-for="item in classlist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
						<el-input placeholder="准考证号" v-model="studentinfoobj.query.eamxNumber" @change="examchange"
							clearable></el-input>
						<el-input placeholder="学生姓名" v-model="studentinfoobj.query.studentName" @change="studentchange"
							clearable></el-input>
					</div>
					<div class="tableContent">
						<el-table class="custom-table" ref="multipleTable" :data="studentlist" tooltip-effect="dark"
							style="width: 100%" @selection-change="handleSelectionChange" stripe
							:header-cell-style="{ background: '#D8E4F0', color: '#2A303B', fontWeight: '500' }">
							<!-- <el-table-column
							type="selection"
							width="55">
							</el-table-column> -->
							<el-table-column label="ID" width="150">
								<template slot-scope="scope">{{ scope.row.id }}</template>
							</el-table-column>
							<el-table-column prop="name" label="姓名">
							</el-table-column>
							<el-table-column prop="studentNumber" label="学号">
							</el-table-column>
							<el-table-column label="准考证号">
								<template slot-scope="scope">
									{{ scope.row.examNumber }}
								</template>
							</el-table-column>
							<el-table-column label="学部">
								<template slot-scope="scope">
									<em v-for="item in scope.row.period">{{ item.name }}</em>
								</template>
							</el-table-column>
							<el-table-column label="班级">
								<template slot-scope="scope">
									<em v-for="item in scope.row.classes">{{ item.name }}</em>
									<em v-for="item in scope.row.grade" style="font-size:12px;color:#999;">{{ item.name
										}}</em>
								</template>
							</el-table-column>
							<!-- <el-table-column
							label="选科"
								width="200">
							<template slot-scope="scope">
								<ul class="answerlist">
									<li v-for="item in scope.row.courses">{{item.name}}</li>
								</ul>
							</template>
							</el-table-column>
							<el-table-column
							label="小语种">
							<template slot-scope="scope">
								<span class="smallsubject" v-for="item in scope.row.languages">{{item.name}}</span>
							</template>
							</el-table-column>
							<el-table-column
								fixed="right"
								label="操作"
								align="center"
								width="150">
								<template slot-scope="scope">
									<div style="display: flex;">
										<el-button @click="handleClick(scope.row)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />编辑</el-button>
										<el-button @click="handledelete(scope.row.id)" type="text" size="small" style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/del.png" style="width:12px;margin-right:5px;" />删除</el-button>
									</div>
								</template>
							</el-table-column> -->
						</el-table>
					</div>
				</div>
			</div>
		</div>
		<div class="examfooter">
			<div class="examFootercontent"
				:style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
				<div class="totaldata">
					<!-- 已选<i>{{multipleSelection.length}}</i>项 /  -->
					<span>共<i>{{ total }}</i>项</span>
					<!-- <em @click="addsinglestudent">新增学生</em>
					<em @click="batchImporttab">批量导入</em>
					<em @click="dacdeletmoreplsc">批量删除</em> -->
				</div>
				<div>
					<!-- <el-pagination
						background
					      @current-change="handleCurrentChange"
					      layout="prev, pager, next, jumper"
					      :total="total">
					    </el-pagination> -->
					<el-pagination background :current-page="studentinfoobj.page" @current-change="handleCurrentChange"
						:page-sizes="[20, 50, 100]" @size-change="handleSizeChange" :page-size="studentinfoobj.pageSize"
						layout="sizes, prev, pager, next" :total="total">
					</el-pagination>
					<!-- <el-pagination
					  background
					  layout="prev, pager, next"
					  :total="1000">
					</el-pagination> -->
				</div>
			</div>
		</div>
		<!-- 新增学生 -->
		<div class="addExamMain" v-if="exditstudentIshow">
			<div class="addExamContent">
				<h3>创建/编辑学生</h3>
				<el-form :model="exitStudent" :rules="rules" ref="exitStudentForm">
					<ul>
						<li>
							<span>ID：</span>
							<div class="inputBox">
								<el-form-item prop="id">
									<el-input v-model="exitStudent.id" clear disabled placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>学生姓名：</span>
							<div class="inputBox">
								<el-form-item prop="name">
									<el-input v-model="exitStudent.name" clear placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>学号：</span>
							<div class="inputBox">
								<el-form-item prop="studentNumber">
									<el-input v-model="exitStudent.studentNumber" clear placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>准考证号：</span>
							<div class="inputBox">
								<el-form-item prop="examNumber">
									<el-input v-model="exitStudent.examNumber" clear placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>学部：</span>
							<div class="inputBox">
								<el-form-item prop="selectedPeriod">
									<el-select v-model="selectedPeriod" placeholder="请选择学段"
										@change="handlePeriodChange">
										<el-option v-for="period in xblevel" :key="period.id" :label="period.name"
											:value="period.id"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>年级：</span>
							<div class="inputBox">
								<el-form-item prop="selectedGrade">
									<el-select v-model="selectedGrade" placeholder="请选择年级" @change="handleGradeChange">
										<el-option v-for="grade in grades" :key="grade.id" :label="grade.name"
											:value="grade.id"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>班级：</span>
							<div class="inputBox">
								<el-form-item prop="classId">
									<el-select v-model="exitStudent.classId" placeholder="请选择班级">
										<el-option v-for="classItem in classes" :key="classItem.id"
											:label="classItem.name" :value="classItem.id"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>选科：</span>
							<div class="inputBox">
								<el-form-item prop="courses">
									<el-select v-model="exitStudent.courses" multiple placeholder="请选择">
										<el-option v-for="item in xksubject" :key="item.id" :label="item.name"
											:value="item.id"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>小语种：</span>
							<div class="inputBox">
								<el-form-item prop="languages">
									<el-select v-model="exitStudent.languages" multiple placeholder="请选择">
										<el-option v-for="item in xksubject" :key="item.id" :label="item.name"
											:value="item.id"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>家长账号：</span>
							<div class="inputBox">
								<el-form-item prop="parentAccount">
									<el-input v-model="exitStudent.parentAccount" clear placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<!-- <li style="color:red;" v-if="attentionIshow">
						<span></span>
						<i class="el-icon-warning-outline" style="margin-right:5px;"></i>{{attention}}
					  </li> -->
					</ul>
					<div class="groupbutton">
						<el-button type="primary" @click="exditstudentsure">保存</el-button>
						<el-button type="primary" @click="exditstudentgoback">返回</el-button>
					</div>
				</el-form>
			</div>
		</div>
		<!-- 批量导入 -->
		<div class="addExamMain" v-if="batcImportIshow">
			<div class="addExamContent">
				<h3>批量上传临时学生</h3>
				<div class="uploadbox">
					<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						<div class="el-upload__tip" slot="tip">每次导入仅能上传一个文件</div>
					</el-upload>
					<a href="#" class="downmoban">下载模板</a>
				</div>
				<div class="groupbutton">
					<el-button type="primary" @click="batcImportsure">确认</el-button>
					<el-button type="primary" @click="batcImportgoback">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import navTop from "../../components/homework/headtop.vue"
import { get, post, del, put } from '../../request/api.js'
import { mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['getScreenWidth']),
		screenWidth() {
			return this.getScreenWidth;
		},
	},
	data() {
		return {
			addExamIshow: false,
			studentlist: [],
			gradelist: [],
			xblevel: [],
			currentPage3: 4,
			gradeId: '',
			choosestudentIshow: false,
			exitStudent: {
				id: '',
				name: '',
				studentNumber: '',
				examNumber: '',
				enrollmentYear: '',
				classId: '',
				courses: [],
				languages: []
			},
			exditstudentIshow: false,
			batcImportIshow: false,
			multipleSelection: [],
			studentinfoobj: {
				page: 1,
				pageSize: 20,
				query: {
					classIds: [],
					eamxNumber: '',
					studentName: ''
				}
			},
			
			setvalue: '',
			total: 0,
			classlist: [],
			// 选中的值
			selectedPeriod: '', // 选中的学段 ID
			selectedGrade: '', // 选中的年级 ID
			// 动态加载的数据
			grades: [], // 当前学段下的年级
			classes: [], // 当前年级下的班级
			xksubject: [],
			attentionIshow: false, // 是否显示提示信息
			attention: "", // 提示信息内容
			// 表单验证规则
			rules: {
				// id: [{ required: true, message: "ID 不能为空", trigger: "blur" }], 	
				name: [{ required: true, message: "学生姓名不能为空", trigger: "blur" }],
				studentNumber: [{ required: true, message: "学号不能为空", trigger: "blur" }],
				examNumber: [{ required: true, message: "准考证号不能为空", trigger: "blur" }],
				classId: [{ required: true, message: "请选择班级", trigger: "change" }],
				courses: [{ required: true, message: "请选择选科", trigger: "change" }],
				parentAccount: [{ required: true, message: "家长账号不能为空", trigger: "blur" }],
			},
			edittype: null
		}
	},
	mounted() {
		this.getstudentlist()
		//获取年级列表
		this.gradelisttab()
		//获取班级列表
		this.classlisttab()
		//学段列表
		this.periodlistclick()
		//选科服务
		this.getsubjectlist()
	},
	methods: {
		// gradechange(val){
		// 	if(this.xbinfo==''){
		// 		this.$message.error('请先选择学部')
		// 	}
		// },
		// classchange(){
		// 	if(this.xbinfo==''){
		// 		this.$message.error('请先选择学部')
		// 	}
		// 	if(this.gradeinfo==''){
		// 		this.$message.error('请选择年级')
		// 	}
		// },
		//获取学生列表、
		getstudentlist() {
			this.studentinfoobj.query.classIds = this.setvalue ? [this.setvalue] : []
			this.studentinfoobj.query.gradeId = this.gradeId ? this.gradeId : 0
			post('/student/list', this.studentinfoobj)
				.then(res => {
					if (res.code == 200) {
						this.studentlist = res.data.items
						this.total = res.data.total
					} else {
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					this.$message.error(error.message);
				})
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		//获取学段列表
		periodlistclick() {
			get('/period/alllist')
				.then(res => {
					if (res.code == 200) {
						this.xblevel = res.data
					} else {
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					this.$message.error(error.message);
				})
		},
		// 学段选择变化
		handlePeriodChange(periodId) {
			// 清空年级和班级的选择
			this.selectedGrade = null;
			this.selectedClass = null;
			this.classes = [];

			// 找到选中的学段
			const selectedPeriod = this.xblevel.find((p) => p.id === periodId);
			if (selectedPeriod) {
				// 更新年级列表
				this.grades = selectedPeriod.grades;
			} else {
				this.grades = [];
			}
		},
		// 年级选择变化
		handleGradeChange(gradeId) {
			// 清空班级的选择
			this.selectedClass = null;
			// 找到选中的年级
			const selectedGrade = this.grades.find((g) => g.id === gradeId);
			if (selectedGrade) {
				// 更新班级列表
				this.classes = selectedGrade.classes;
			} else {
				this.classes = [];
			}
		},
		//获取年纪列表
		gradelisttab() {
			get('/grade/list')
				.then(res => {
					if (res.code == 200) {
						this.gradelist = res.data
					} else {
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					this.$message.error(error.message);
				})
		},
		//获取班级列表
		classlisttab() {
			get('/classes/list')
				.then(res => {
					if (res.code == 200) {
						this.classlist = res.data
					} else {
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					this.$message.error(error.message);
				})
		},
		//获取选科
		getsubjectlist() {
			get('/course/alllist')
				.then(res => {
					if (res.code == 200) {
						this.xksubject = res.data
					} else {
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					this.$message.error(error.message);
				})
		},
		xbchange(val) {
			this.studentinfoobj.page = 1;
			this.getstudentlist()
			if (val) {
				get('/grade/classlist', { gradeId: val })
					.then(res => {
						if (res.code == 200) {
							this.classlist = res.data
						} else {
							this.$message.error(res.message);
						}
					})
					.catch(error => {
						this.$message.error(error.message);
					})
			} else {
				get('/classes/list')
					.then(res => {
						if (res.code == 200) {
							this.classlist = res.data
						} else {
							this.$message.error(res.message);
						}
					})
					.catch(error => {
						this.$message.error(error.message);
					})
			}
		},
		// 保存按钮点击事件
		exditstudentsure() {
			this.$refs.exitStudentForm.validate((valid) => {
				if (valid) {
					// 表单验证通过，提交数据
					this.submitForm();
				}
			});
		},
		// 提交表单数据
		submitForm() {
			// 这里写提交表单的逻辑
			// //console.log("表单数据：", this.exitStudent);
			if (this.edittype == 1) {
				post('/student/add', this.exitStudent)
					.then(res => {
						// //console.info(res)
						if (res.code == 200) {
							this.$message.success('添加成功')
							this.exditstudentIshow = false
							this.exitStudent = {
								id: '',
								name: '',
								studentNumber: '',
								examNumber: '',
								enrollmentYear: '',
								classId: '',
								courses: [],
								languages: [],
								parentAccount: '',
								studentId: ''
							},
								this.selectedPeriod = '', // 选中的学段 ID
								this.selectedGrade = '', // 选中的年级 ID
								this.getstudentlist()
						} else {
							this.$message.error(res.message);
						}
					})
			} else {
				put('/student/update', this.exitStudent)
					.then(res => {
						// //console.info(res)
						if (res.code == 200) {
							this.$message.success('编辑成功')
							this.exditstudentIshow = false
							this.exitStudent = {
								id: '',
								name: '',
								studentNumber: '',
								examNumber: '',
								enrollmentYear: '',
								classId: '',
								courses: [],
								languages: [],
								parentAccount: '',
								studentId: ''
							},
								this.selectedPeriod = '', // 选中的学段 ID
								this.selectedGrade = '', // 选中的年级 ID
								this.getstudentlist()
						} else {
							this.$message.error(res.message);
						}
					})
			}

		},
		// 返回按钮点击事件
		exditstudentgoback() {
			// 返回逻辑
			this.exditstudentIshow = false;
		},
		//编辑学生
		handleClick(con) {
			// //console.info(con)
			this.edittype = 2
			this.exitStudent = {
				id: con.id,
				name: con.name,
				studentNumber: con.studentNumber,
				examNumber: con.examNumber,
				enrollmentYear: con.enrollmentYear,
				classId: con.classes[0].id,
				courses: con.courses.map(item => item.id),
				languages: con.languages.map(item => item.id),
				parentAccount: con.parentAccount,
				studentId: con.studentId
			},
				this.exditstudentIshow = true;
		},
		//删除单个学生
		handledelete(id) {
			let ids = [id]
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				post('/student/delete', ids)
					.then(res => {
						if (res.code == 200) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getstudentlist()
						} else {
							this.$message.error(res.message);
						}
					})
					.catch(error => {
						this.$message.error(error.message);
					})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		//批量删除学生
		dacdeletmoreplsc() {
			// //console.info(this.multipleSelection.length)
			if (this.multipleSelection.length > 0) {
				let ids = this.multipleSelection.map(item => item.id)
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					post('/student/delete', ids)
						.then(res => {
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.getstudentlist()
							} else {
								this.$message.error(res.message);
							}
						})
						.catch(error => {
							this.$message.error(error.message);
						})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			} else {
				this.$message({
					type: 'warning',
					message: '请先选择要删除的内容'
				});
			}
		},
		classchange(val) {
			// this.studentObj.query.classIds = [val]
			this.studentinfoobj.page = 1;
			this.getstudentlist()
		},
		examchange() {
			this.studentinfoobj.page = 1;
			this.getstudentlist()
		},
		studentchange() {
			this.studentinfoobj.page = 1;
			this.getstudentlist()
		},
		// 新建考试
		addExam() {
			this.addExamIshow = true
		},
		addexamclick(data) {
			this.addExamIshow = data
		},
		// 跳转不同页面
		routerlink(link) {
			this.$router.push(link)
		},
		handleCurrentChange(val) {
			this.studentinfoobj.page = val
			this.getstudentlist()
		},
		handleSizeChange() {
			this.studentinfoobj.pageSize = val
			this.getstudentlist()
		},
		handleCheckAllChange(month, checked) {
			if (checked) {
				month.selected = month.options.map(option => option.value);
			} else {
				month.selected = [];
			}
			this.isIndeterminate(month);
		},
		isIndeterminate(month) {
			return month.selected.some(value => month.options.map(option => option.value).includes(value)) && month.selected.length !== month.options.length;
		},
		studentsure() {
			this.choosestudentIshow = false
		},
		goback() {
			this.choosestudentIshow = false
		},
		addsinglestudent() {
			this.edittype = 1
			this.exditstudentIshow = true
		},
		batcImportsure() {
			this.batcImportIshow = false
		},
		batcImportgoback() {
			this.batcImportIshow = false
		},
		batchImporttab() {
			this.batcImportIshow = true
		}
	},
	components: { navTop }
}
</script>

<style scoped>
.main {
	min-height: 100vh;
	;
	background: #F4F7FD;
}

/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
.contentMain {
	width: auto;
	margin: 0 auto;
	padding-bottom: 70px;
}

.contentboxset {
	background: #fff;
	height: 32px;
	border-top: solid 2px #F4F7FD
}

.breadBox {
	width: 1440px;
	margin: 0 auto;
	min-width: 1200px;
	line-height: 32px;
}

.el-breadcrumb {
	width: auto;
	margin: 0 auto;
	line-height: 30px;
	font-size: 14px;
}

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
	color: #B3B8C2
}

.contentmaincontent {
	width: 1440px;
	;
	margin: 0 auto;
}

.searchlist {
	box-sizing: border-box;
	width: auto;
	padding: 0 40px;
	display: flex;
	justify-content: space-between;
	height: 54px;
	background: #FFFFFF;
	border-radius: 10px;
	padding: 0 24px;
	align-items: center;
	margin-top: 15px;
}

.searchlist {
	padding-left: 20px;
	display: flex;
	align-items: center;
	justify-content: left;
}

.searchlist a {
	display: block;
	color: #557292;
	font-size: 14px;
	width: 100px;
	text-align: center;
	position: relative;
	line-height: 52px;
}

.searchlist a:hover,
.searchlist a.hover {
	color: #295CFF;
}

.searchlist a:hover::after,
.searchlist a.hover::after {
	content: '';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}

.overviewcontent {
	background: #FFFFFF;
	box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
	border-radius: 10px;
	width: auto;
	margin: 15px auto 0;
}

.examInfo {
	display: flex;
	align-items: center;
}

.examInfo b {
	font-weight: normal;
	font-size: 14px;
	color: #333;
	position: relative;
	padding-right: 14px;
	margin-right: 14px;
}

.examInfo b i {
	font-style: normal;
	color: #8E96A4
}

.examInfo b::after {
	content: '';
	width: 1px;
	height: 8px;
	background: #DEE1E7;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.examInfo b:last-child::after {
	content: '';
	width: 1px;
	height: 8px;
	background: #fff;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.overvcontentTop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px;
}

.overvcontentTop h3 {
	font-size: 18px;
	font-weight: 500;
	padding-bottom: 15px;
}

.overvcontentTop span {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	line-height: 34px;
	cursor: pointer;
}

.tableContent {
	padding: 0 24px 30px;
	border-radius: 10px;
}

.tableContent table {
	border-radius: 10px;
	border: 1px solid rgba(216, 228, 240, 0.5);
}

.tableContent table tr th {
	font-size: 14px;
	font-weight: normal;
	background: #E8F0FA;
	height: 42px;
}

.tableContent table tr th:first-child {
	border-radius: 8px 0 0 0;
}

.tableContent table tr th:last-child {
	border-radius: 0 8px 0 0;
}

.tableContent table tr td {
	height: 42px;
	text-align: center;
	font-size: 14px;
	border-right: solid 1px rgba(216, 228, 240, 0.34);
}

.tableContent table tr td:last-child {
	border-right: none;
}

.tableContent table tr td i {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: #999
}

.tableContent table tr td em {
	display: block;
}

.tableContent table tr td span {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tableContent table tr td span em {
	font-size: 12px;
	font-style: normal;
}

.tableContent table tr td span::after {
	content: '';
	width: 43px;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%);
	background: #000;
}

.tableContent table tr td span.green {
	color: #288F41
}

.tableContent table tr td span.green::after {
	content: '';
	width: 43px;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%);
	background: #288F41;
}

.tableContent table tr td span.blue {
	color: #295CFF
}

.tableContent table tr td span.blue::after {
	content: '';
	width: 43px;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%);
	background: #295CFF;
}

.tableContent table tr td span.red {
	color: #EC555A
}

.tableContent table tr td span.red::after {
	content: '';
	width: 43px;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%);
	background: #EC555A;
}

.tableContent table tr td span.gray {
	color: #D8E4F0
}

.tableContent table tr td span.gray::after {
	content: '';
	width: 43px;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%);
	background: #D8E4F0;
}

.tableContent table tr:nth-child(3n) {
	background: #FAFAFB
}

.studentSearch {
	display: flex;
	padding: 24px 24px 14px;
	justify-content: left;
}

.studentSearch .el-select {
	width: 124px;
	margin-right: 24px;
}

.studentSearch>>>.el-input__inner {
	width: 124px;
	border-radius: 10px;
	height: 35px;
	font-size: 14px;
}

.studentSearch>>>.el-input__icon {
	line-height: 35px;
}

.el-input {
	width: auto;
	margin-right: 24px;
}

.studentSearch b {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	line-height: 34px;
	cursor: pointer;
}

.examfooter {
	width: 100%;
	height: 54px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 100
}

.examFootercontent {
	width: 1440px;
	;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.examFootercontent .totaldata {
	font-size: 14px;
	color: #557292;
	display: flex;
	justify-content: left;
	align-items: center;
}

.examFootercontent .totaldata i {
	display: inline-block;
	color: #295CFF;
	font-style: normal;
	line-height: 54px;
	padding: 0 3px;
}

.examFootercontent .totaldata em {
	font-style: normal;
	width: 96px;
	height: 34px;
	border-radius: 10px;
	line-height: 34px;
	background: #295CFF;
	text-align: center;
	color: #fff;
	margin-left: 14px;
	cursor: pointer;
}

.examFootercontent .totaldata em:last-child {
	background: #EC555A;
}

.examFootercontent .totaldata>>>.el-pager li.active {
	background-color: #295CFF
}

.scorered {
	font-size: 14px;
	color: #EC555A;
	padding: 24px 0;
}

.custom-table {
	width: 100%;
	border: 1px solid rgba(216, 228, 240, 0.34);
	border-radius: 10px;
	border-right: none;
	border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table>>>.el-table__header-wrapper th {
	background-color: #E8F0FA;
	height: 42px;
	padding: 0;
	text-align: center;
	font-weight: normal
}

.custom-table>>>.el-table__row td {
	height: 42px;
	padding: 0;
	text-align: center;
	border-bottom: none;
	border-right: solid 1px rgba(216, 228, 240, 0.34);
	font-size: 14px;
}

.el-table .warning-row {
	background: #ffffff;
}

.el-table .success-row {
	background: #D8E4F0;
}

.examFootercontent>>>.el-pagination__jump {
	margin-left: 5px;
}

.examFootercontent>>>.el-pager {
	margin-top: 2px;
}

.examFootercontent>>>.el-pager li {
	margin: 0 3px;
	min-width: 25px;
	height: 25px;
	line-height: 25px
}

.examFootercontent>>>.el-pagination button {
	height: 25px;
	line-height: 25px;
	margin-top: 2px;
}

.answerlist {
	display: flex;
	align-items: center;
}

.smallsubject {
	width: 48px;
	height: 22px;
	font-size: 14px;
	text-align: center;
	line-height: 22px;
	border-radius: 6px;
	margin: 0 5px;
	background: rgba(162, 53, 113, 0.06);
	border: 1px solid rgba(162, 53, 113, 0.5);
	color: #A23571;
}

.answerlist li {
	width: 48px;
	height: 22px;
	font-size: 14px;
	text-align: center;
	line-height: 22px;
	border-radius: 6px;
	margin: 0 5px;
}

.answerlist li:nth-child(1) {
	background: rgba(101, 157, 113, 0.06);
	border: 1px solid rgba(101, 157, 113, 0.5);
	color: #659D71
}

.answerlist li:nth-child(2) {
	background: rgba(49, 121, 190, 0.06);
	border: 1px solid rgba(49, 121, 190, 0.5);
	color: #3179BE
}

.answerlist li:nth-child(3) {
	background: rgba(84, 62, 164, 0.06);
	border: 1px solid rgba(84, 62, 164, 0.5);
	color: #543EA4
}

.answerlist li:nth-child(4) {
	background: rgba(101, 157, 113, 0.06);
	border: 1px solid rgba(101, 120, 157, 0.5);
	color: #65789D
}

.addExamMain {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	left: 0;
	top: 0;
	z-index: 100;
}

.addExamContent {
	width: 584px;
	height: auto;
	background: #FFFFFF;
	box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
	border-radius: 10px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	box-sizing: border-box;
	padding: 30px;
}

.addExamContent h3 {
	font-size: 18px;
	padding-bottom: 20px;
}

.addExamContent>>>.el-form-item {
	margin: 0;
}

.groupbutton {
	display: flex;
	align-items: center;
	padding-top: 20px;
	justify-content: center;
}

.groupbutton>>>.el-button {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	padding: 0;
}

.groupbutton>>>.el-button:last-child {
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color: #295CFF;
	margin-left: 24px;
}

.choosestudent {
	display: flex;
	align-items: center;
	padding: 10px 0 24px;
}

.choosestudent span {
	font-size: 14px;
	color: #557292;
}

.choosestudent>>>.el-input__inner {
	width: 436px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid #D8E4F0;
}

.checkbox-group {
	font-size: 14px;
	color: #5B6371;
	margin-bottom: 20px;
}

.el-checkbox {
	margin-bottom: 12px;
}

.addExamContent ul li {
	display: flex;
	align-items: center;
	padding-bottom: 14px;
	font-size: 14px;
}

.addExamContent ul li span {
	font-size: 14px;
	width: 80px;
	color: #557292;
	text-align: right;
}

.addExamContent ul li p {
	position: relative;
}

.addExamContent ul li p em {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #C0C4CC;
	cursor: pointer;
}

.addExamContent ul li>>>.el-input__inner {
	width: 400px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid #D8E4F0;
}

.inputBox {
	width: 400px;
}

.inputBox1 {
	width: 300px;
}

.addExamContent ul li div.inputBox1>>>.el-input__inner {
	width: 300px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid #D8E4F0;
}

.addExamContent ul li>>>.el-range__icon {
	line-height: 27px;
}

.groupbutton {
	display: flex;
	align-items: center;
	padding-top: 20px;
}

.groupbutton>>>.el-button {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	padding: 0;
}

.groupbutton>>>.el-button:last-child {
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color: #295CFF;
	margin-left: 24px;
}

.bcontentcolor {
	font-size: 14px;
	color: #295CFF;
	display: inline-block;
	margin-left: 20px;
	cursor: pointer;
}

.infosetcontentfont {
	color: #5B6371
}

.addExamContent ul li.infosetcontentfont span {
	width: auto;
	height: 26px;
	border-radius: 4px;
	border: 1px solid #D8E4F0;
	color: #B3B8C2;
	font-size: 14px;
	text-align: left;
	line-height: 26px;
	padding: 0 16px 0 10px;
	margin-left: 10px;
}

.addExamContent ul li.infosetcontentfont i {
	font-style: normal;
	color: #295CFF;
	padding: 0 4px;
}

.addExamContent>>>.el-upload-dragger {
	width: 522px;
}

.uploadbox {
	width: 522px;
	height: 220px;
	position: relative;
}

.uploadbox a {
	position: absolute;
	right: 0;
	bottom: 10px;
	font-size: 14px;
	color: #295CFF;
}

.breadBox>>>.el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__inner.is-link {
	font-weight: normal
}

.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
	font-weight: bold
}

.examFootercontent>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #295CFF !important;
}
</style>